<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body{
		margin: 0;
		padding: 0;
	}
	#box{
		background-color: tan;
		margin: 0 auto;
		width: 300px;
		height: 300px;
		border-radius: 50%;
	}
	.show{
		display: block;
	}
	.hidden{
		display: none;
	}
	</style>
</head>
<body>
	<input type="button" id="btn" value="隐藏" >
	<br>
	<div id="box"></div>
	<script>
	var btn = document.getElementById('btn')
	var isShow = true;
	btn.onclick=function(){
		var box = document.getElementById('box')
		if(isShow){
			box.className = 'hidden';
			// btn.value="显示";
			this.value="显示";
			isShow = false;
		}else{
			box.className = 'show';
			this.value="隐藏";
			isShow=true;
		}
	}
	</script>
</body>
</html>